import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import mockData from './data.json'

// JSX语法学习
let root = document.getElementById('root');
// let h1 =<h1>this is the title 0f  h1<span><span>{document.write(JSON.stringify(mockData))}</span></span></h1>
// 一、渲染疫情地图
// 第一步：构造数据对象
let countryList ={
  // '美国':{
  //   parent:'海外',
  //   diagnosis:0,
  //   death:0,
  //   cure:0,
  //   startTime:'2021-5-13',
  //   updateTime:'2021-05-11 14:36:46'

  // }
};
let countryArrList =[];
mockData.forEach((item,idx)=>{
  if(countryList[item.province] === undefined){
      countryList[item.province]={
        parent:item.parent,
        diagnosis:item.diagnosis,
        death:item.death,
        cure:item.cure,
        startTime:item.statDate,
        updateTime:item.updateTime,
        key:idx,
        province:item.province
      }
  }
});
// console.log('countryList=>',countryList);
for(let key in countryList){
  let obj={};
  obj[key]=countryList[key];
  countryArrList.push(obj);
};
console.log('countryArrList=>',countryArrList)

// 第二步：渲染上页面列表
class EpidemicList extends React.Component{
  constructor(props){
    super(props);
  };
  render(){
    return (
      <div  className = 'epidemicWrap'>
        <h5 className='tableTitle'>世界疫情实时情况</h5>
        <table 
        border='1' 
        cellPadding='8px'
        cellSpacing='0'
        >
          <thead>
            <tr>
              <th>国家</th>
              <th>确诊人数</th>
              <th>治愈人数</th>
              <th>死亡人数</th>
              <th>地区</th>
              <th>开始时间</th>
              <th>更新时间</th>
            </tr>
          </thead>
          <tbody>
            {
              countryArrList.map((item,index)=>{
                let tempItem =null;
                for(let key in item) tempItem=item[key];
                console.log(tempItem);
                item = tempItem;
                return (
                    <tr key={index}>
                      <td>{item.province}</td>
                      <td>{item.diagnosis}</td>
                      <td>{item.cure}</td>
                      <td>{item.death}</td>
                      <td>{item.parent}</td>
                      <td>{item.startTime}</td>
                      <td>{item.updateTime}</td>
                    </tr>
                )
              })
            }
            </tbody>
        </table>
      </div>
    )
  }
}


ReactDOM.render(
  <EpidemicList></EpidemicList>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
